<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 重置样式 -->
    <link href="../../asserts/css/reset.css" rel="stylesheet">
    <!-- 字体库 -->
    <link href="../../asserts/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 引入首页css -->
    <link href="./index.css" rel="stylesheet">
    <style>
        .useVIP {
            /* 定义  购买会员部分的高度 */
            --vipHeight: 54px;

            width: calc(100% - 20px);
            margin: 0 auto;
            margin-top: 10px;
            background-color: #FFECC1;
            border-radius: 3px;
        }

        .useVIP .left {
            width: 70%;
            min-height: var(--vipHeight);
            line-height: var(--vipHeight);
            padding-left: 2.5em;
            background: url('../../asserts/images/VIP皇冠.png') no-repeat;
            background-position: 0.2em center;
            background-size: 2em 2em;
            font-size: 1.3em;
            font-weight: 700;
            color: #60512A;
        }

        .useVIP .left>span {
            font-size: 1em;
            /* color: #60512A;  */
            font-weight: normal;
            padding-left: 0.5em;
        }

        .useVIP .right {
            height: var(--vipHeight);
            line-height: var(--vipHeight);
            margin-right: 10px;
        }

        .useVIP .right a {
            text-decoration: none;
            color: #B3916C;
            font-weight: 600;
        }
    </style>

</head>

<body>
    <div class="container_home">

        <div class="useVIP">
            <div class="left float_left">超级会员 <span>•每月享超值权益</span></div>
            <div class="right float_right"><a href="">立即开通 > </a></div>
            <!-- 用于清除由于浮动引起的父元素高度塌陷 -->
            <div class="clear"></div>
        </div>


    </div>


</body>

</html>